<template>
	<n-scrollbar>
		<div class='system-notice-detail-container'>
			<div class='header'>
				<h1>{{ systemNoticeDetail.title }}</h1>
				<div class='detail'>
					<span>公告发布时间 : {{ systemNoticeDetail.startTime }}</span>
					<span>公告结束时间 : {{ systemNoticeDetail.endTime }}</span>
					<span>
						创建用户 :
						<FormatText2 v-model:modelValue='systemNoticeDetail.createUser'
									 :dict='dict' :dictName='"userList"'/>
					</span>
					<span>
						<n-button type='success' :bordered='false' round
								  @click='showModal'>
							查看附件
						</n-button>
					</span>
				</div>
			</div>
			<div class='system-notice-detail-container-body'>
				<CKEditor-A4 ref='CKEditor5WatchDogRef'
							 v-model:initValue='modelData'
							 v-model:htmlValue='htmlData'
							 readOnly :editorConfig='editorConfig'/>
			</div>
		</div>
	</n-scrollbar>
	<FileModal ref='systemNoticeFileModalRef' v-bind='modalFileLoadListConfig'/>
</template>
<script lang='ts' setup>
import type { JsonResultProps } from '#/JsonResult.d.ts';
import { computed, defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
import axios from '@/config/axios/index.ts';
import { VxeUI } from '@/config/vxe/index.ts';
import { EditorConfig } from '@ckeditor/ckeditor5-core';
// 字典组件
import type { Dict } from '#/Dictionary.d.ts';
import type {
	CommonFileUpDownLoadProps, FileDownLoadProps, FileQueryProps, FileRemoveProps, FileUpLoadProps
} from '#/src/components/customComponents/fileUpLoad/modal/ModalFileUpLoadListProps.d.ts';
import type { SystemNoticeInfoProps } from '#/src/components/page/systemManager/noticeMaintain/SystemNoticeProps.d.ts';
const CKEditorA4 = defineAsyncComponent(
	() => import('@/components/customComponents/CKEditor5WatchDog/CKEditor-A4.vue'));
const FormatText2 = defineAsyncComponent(() => import('@/components/customComponents/dict/FormatText2.vue'));
const FileModal = defineAsyncComponent(
	() => import('@/components/customComponents/fileUpDownLoad/modal/FileModal.vue'));
const props = defineProps({
	params : {
		type    : Object,
		require : true,
		default : () => {
			return {};
		}
	}
});
const systemNoticeFileModalRef = ref<InstanceType<typeof FileModal>>();
const CKEditor5WatchDogRef = ref<InstanceType<typeof CKEditorA4>>();
// 预置的字典变量
const dict = reactive<Dict>({});
const systemNoticeDetail = reactive<Partial<SystemNoticeInfoProps>>({});
const editorConfig: EditorConfig = reactive({
	language : 'zh-cn',
	heading  : {
		options : [
			{ model : 'paragraph', title : 'Paragraph', class : 'ck-heading_paragraph' },
			{ model : 'heading1', view : 'h1', title : 'Heading 1', class : 'ck-heading_heading1' },
			{ model : 'heading2', view : 'h2', title : 'Heading 2', class : 'ck-heading_heading2' },
			{ model : 'heading3', view : 'h3', title : 'Heading 3', class : 'ck-heading_heading3' }
		]
	}
});
const modelData = ref<string>('');
const htmlData = ref<string>('');
const tenantCode = ref<string>('');
const businessCode = computed(() => props.params.noticeCode);
const modalFileLoadListConfig = reactive<CommonFileUpDownLoadProps>({
	fileQuery  : {
		enabled  : true,
		url      : 'file/pagingList',
		params   : {
			tenantCode   : tenantCode,
			businessType : 'notice',
			businessCode : businessCode
		},
		downLoad : {
			enabled  : true,
			url      : '/file/download',
			params   : {},
			fieldMap : {
				filePath : 'filePath',
				fileName : 'fileName'
			}
		} as FileDownLoadProps,
		remove   : {
			enabled  : false,
			url      : 'file/remove',
			params   : {
				tenantCode   : tenantCode,
				businessType : 'notice',
				businessCode : businessCode
			},
			fieldMap : {
				filePath : 'filePath'
			}
		} as FileRemoveProps
	} as FileQueryProps,
	fileUpLoad : {
		enabled : false,
		url     : 'file/upload',
		params  : {
			tenantCode   : tenantCode,
			businessType : 'notice',
			businessCode : businessCode
		},
		headers : {},
		timeout : 60000,
		field   : 'file',
		format  : ['pdf', 'txt', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'ppt', 'zip', 'tar', 'gz', 'rar', '7z'],
		/**
		 * 1024=1K
		 * 1024 * 10=10K
		 * 1024 * 100=100K
		 * 1024 * 1000=1MB
		 * 1024 * 10000=10MB
		 * 1024 * 100000=100MB
		 * 1024 * 1000000=1000MB
		 */
		maxSize         : 1024 * 1000000,
		onAfterValidate : () => onAfterValidate(),
		onBeforeUpload  : () => onBeforeUpload(),
		onAfterUpload   : () => onAfterUpload()
	} as FileUpLoadProps
});
onMounted(async () => {
	await initAll();
});
watch(htmlData, async (newValue, oldValue) => {
	// 打出来的是html内容
	// console.log(newValue);
}, {
	deep      : false,
	immediate : false
});
const initAll = async () => {
	tenantCode.value = sessionStorage.getItem('loginTenantCode') as string;
	initDict().then((userList: any): void => {
		// 合并字典
		Object.assign(dict, { 'userList' : userList });
		console.log(dict);
		initData();
	});
};
const initDict = async () => {
	// 加载字典
	return new Promise((resolve, reject): any => {
		axios<any, JsonResultProps<any>, any>({
			method : 'GET',
			url    : `/user/list/${sessionStorage.getItem('loginTenantCode')}`
		}).then((jsonResult: JsonResultProps<any>) => {
			if (jsonResult.status) {
				resolve(jsonResult.data);
			} else {
				VxeUI.modal.message({ content : jsonResult['msg'], status : 'warning', id : 'failedMessage' });
				reject();
			}
		}).catch((error: any) => {
			console.error(error);
			VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
			reject();
		});
	});
};
const initData = async () => {
	// 有ID才进行查询
	if (props.params.noticeCode) {
		axios<any, JsonResultProps<any>, any>({
			method : 'GET',
			url    : `/notice/detail/${sessionStorage.getItem('loginTenantCode')}/${props.params.noticeCode}`
		}).then((jsonResult: JsonResultProps<any>) => {
			if (jsonResult.status) {
				Object.assign(systemNoticeDetail, jsonResult.data);
				modelData.value = jsonResult.data.content;
			} else {
				VxeUI.modal.message({ content : jsonResult['msg'], status : 'warning', id : 'failedMessage' });
			}
		}).catch((error: any) => {
			console.error(error);
			VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
		});
	} else {
		await VxeUI.modal.message({
			content : '请传递一个NoticeCode!',
			status  : 'warning',
			id      : 'NoParameterPassedMessage'
		});
	}
};
const showModal = async () => {
	systemNoticeFileModalRef.value?.openModal({
		title  : '查看附件',
		width  : '700',
		height : '400'
	});
};
const onAfterValidate = async () => {
	console.log('onAfterValidate');
};
const onBeforeUpload = async () => {
	console.log('onBeforeUpload');
};
const onAfterUpload = async () => {
	systemNoticeFileModalRef.value?.modalComponentRef?.initGrid();
	// 成功提交时,清除已上传完毕的
	systemNoticeFileModalRef.value?.modalComponentRef?.clearWaitForUploadFileList();
};
</script>
<style lang='scss' scoped>
.system-notice-detail-container{
	box-sizing      :border-box;
	margin          :0;
	padding         :1.5%;
	border          :0;
	height          :100%;
	width           :100%;
	font-size       :16px;
	overflow        :hidden;
	display         :flex;
	flex-direction  :column;
	flex-wrap       :nowrap;
	align-content   :center;
	justify-content :flex-start;
	align-items     :center;
	.header{
		box-sizing      :border-box;
		margin          :0 0 1%;
		padding         :0;
		border          :0;
		height          :auto;
		width           :100%;
		display         :flex;
		flex-direction  :column;
		flex-wrap       :nowrap;
		align-content   :center;
		justify-content :flex-start;
		align-items     :center;
		h1{
			margin :0;
		}
		.detail{
			box-sizing      :border-box;
			margin          :0;
			padding         :0;
			border          :0;
			width           :100%;
			display         :flex;
			flex-direction  :row;
			flex-wrap       :nowrap;
			align-content   :center;
			justify-content :space-around;
			align-items     :center;
		}
	}
	.system-notice-detail-container-body{
		box-sizing :border-box;
		margin     :0;
		padding    :0;
		border     :0;
		height     :auto;
		width      :100%;
		/*display         :flex;
		flex-direction  :column;
		flex-wrap       :nowrap;
		align-content   :flex-start;
		justify-content :flex-start;
		align-items     :center;*/
	}
}
</style>